import React, { useState } from 'react'
import { Divider, Row, Col, Radio, InputNumber, Slider, Button, Checkbox, Popover, Switch, Input, Space, Dropdown, Tag, Tooltip } from 'antd'
import { CloseOutlined } from '@ant-design/icons'
import SelectModel from '@/components/SelectModel'
import SortList from '@/components/SortList';
import EditLink from '@/components/EditLink';
import SelectLink from '@/components/SelectLink';
import './index.less'
const FormComponents = (props) => {
    const { selectData, data, edit } = props
    const { selectIndex } = data
    const {
        list,
        showMore,
        title,
        titleFlag,
        showCount,
        showComponents,
        countType,
        bottom,
        top,
        linkType,
        marginType,
        goodsNameStatus,
        goodsDescStatus,
        priceFlag,
        oldPriceFlag,
        textStyle,
        textAlign,
        paddingLeft,
        paddingTop,
    } = selectData
    const [visible, setVisible] = useState(false)
    const [editVisible, setEditVisible] = useState(false)
    console.log(selectData)
    const items = (index, item) => {
        return [
            {
                label: (
                    <Button onClick={() => {
                        handleUpdate({
                            linkType: 'customizeList',
                        })
                    }} type='link'>商品列表</Button>
                ),
                key: '0',
            },
            {
                label: (
                    <Button onClick={() => {
                        setEditVisible({
                            show: true,
                            detail: item,
                            index: index,
                        })
                    }} type='link'>自定义链接</Button>
                ),
                key: '1',
            },
        ]
    };
    const renderTag = (item) => {
        const { linkType, linkSrc, linkData } = item
        if (linkType === 'customizeList') {
            return '商品列表'
        } else {
            const { goodsName } = linkData
            return '链接|' + linkSrc
        }
    }
    const handleUpdate = (o) => {
        edit({
            list: data.list.map((val, index) => {
                if (index === selectIndex) {
                    return {
                        ...val,
                        ...o
                    }
                }
                return val
            })
        })
    }

    return <Row gutter={[12, 24]}>
        <Col
            span={24}>
            商品
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            列表样式
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            <Radio.Group onChange={(e) => {
                handleUpdate({
                    countType: e.target.value
                })
            }} value={countType}>
                <Radio.Button value={'list'}>列表</Radio.Button>
                <Radio.Button value={'bigImage'}>大图</Radio.Button>
                <Radio.Button value={'twoList'}>一行两个</Radio.Button>
                <Radio.Button value={'leftScroll'}>横向滑动</Radio.Button>
                <Radio.Button value={'threeList'}>一行三个</Radio.Button>
            </Radio.Group>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            <Space>
                <div>标题栏</div>
                <div style={{ color: '#333333' }}>{titleFlag ? '显示' : '隐藏'}</div>
                <div><Switch onChange={(e) => {
                    handleUpdate({
                        titleFlag: e
                    })
                }} checked={titleFlag}></Switch></div>
            </Space>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            标题名称
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            <Input
                showCount
                maxLength={20}
                onChange={(e) => {
                    handleUpdate({ title: e.target.value })
                }} value={title}>

            </Input>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            <Space>
                <div>查看更多</div>
                <div style={{ color: '#333333' }}>{showMore ? '显示' : '隐藏'}</div>
                <div><Switch onChange={(e) => {
                    handleUpdate({
                        showMore: e
                    })
                }} checked={showMore}></Switch></div>
            </Space>
        </Col>
        {showMore && <Col className='editor-content-item-label'
            span={24}>
            <div>
                <Space>
                    <div>
                        跳转链接:
                    </div>
                    <SelectLink handleUpdate={(e) => {
                        handleUpdate({
                            ...e
                        })
                    }} data={selectData}></SelectLink>
                </Space>

            </div>
        </Col>}
        <Col
            span={24}>
            内容
        </Col>
        <Col className='editor-form-setting'
            span={24}>
            <SortList onSort={(e) => {
                handleUpdate({
                    list: e
                })
            }} childrenData={list} list={list} renderProps={(val, index) => {
                const { cover, goodsName } = val
                return <div key={index} className='imageAd-item'>
                    <Space style={{ width: "100%" }} direction='vertical'>
                        <div className='Shop_box_content'>
                            <div className='content-img'>
                                <img style={{
                                    width: '100%',
                                    height: '100%',
                                    borderRadius: '4px',
                                    objectFit: 'cover'
                                }} src={cover} />
                            </div>
                            <div className='content-text'>{goodsName}</div>
                        </div>
                        <CloseOutlined onClick={(e) => {
                            e.preventDefault();
                            handleUpdate({
                                list: list.filter((item, o) => {
                                    return o !== index
                                })
                            })
                        }} className='close_icon'></CloseOutlined>
                    </Space>
                    <CloseOutlined onClick={(e) => {
                        e.preventDefault();
                        handleUpdate({
                            list: list.filter((item, o) => {
                                return o !== index
                            })
                        })
                    }} className='close_icon'></CloseOutlined>
                </div>
            }}></SortList>


            <div onClick={() => {
                setVisible({
                    show: true,
                    details: list
                })
            }} className='imageAd-add-btn'>
                <Button type='link'>+添加商品</Button>
            </div>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            当前页显示
            <Radio.Group onChange={(e) => {
                handleUpdate({
                    showComponents: e.target.value
                })
            }} value={showComponents}>
                <Radio value={'all'}>显示全部</Radio>
                <Radio value={'count'}>显示<InputNumber style={{ margin: '0 12px' }} min={1}
                    max={30} onChange={(e) => {
                        handleUpdate({ showCount: e })
                    }} value={showCount}></InputNumber>个</Radio>
            </Radio.Group>
        </Col>
        <Divider></Divider>
        <Col
            span={24}>
            内容展示
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            商品名称
            <Radio.Group onChange={(e) => {
                handleUpdate({
                    goodsNameStatus: e.target.value
                })
            }} value={goodsNameStatus}>
                <Radio value={'none'}>不显示</Radio>
                <Radio value={'one'}>一行</Radio>
                <Radio value={'two'}>两行</Radio>
            </Radio.Group>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            商品描述
            <Radio.Group onChange={(e) => {
                handleUpdate({
                    goodsDescStatus: e.target.value
                })
            }} value={goodsDescStatus}>
                <Radio value={'none'}>不显示</Radio>
                <Radio value={'one'}>一行</Radio>
                <Radio value={'two'}>两行</Radio>
            </Radio.Group>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            <Space>
                <div>商品价格</div>
                <div style={{ color: '#333333' }}>{priceFlag ? '显示' : '隐藏'}</div>
                <div><Switch onChange={(e) => {
                    handleUpdate({
                        priceFlag: e
                    })
                }} checked={priceFlag}></Switch></div>
            </Space>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            <Space>
                <div>划线价格</div>
                <div style={{ color: '#333333' }}>{oldPriceFlag ? '显示' : '隐藏'}</div>
                <div><Switch onChange={(e) => {
                    handleUpdate({
                        oldPriceFlag: e
                    })
                }} checked={oldPriceFlag}></Switch></div>
            </Space>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            内容样式
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            文本样式：
            <Radio.Group onChange={(e) => {
                handleUpdate({
                    textStyle: e.target.value
                })
            }} value={textStyle}>
                <Radio value={'500'}>常规</Radio>
                <Radio value={'bold'}>粗体</Radio>
            </Radio.Group>
        </Col>
        {/* <Col className='editor-content-item-label'
            span={24}>
            文本样式：
            <Radio.Group onChange={(e) => {
                handleUpdate({
                    textAlign: e.target.value
                })
            }} value={textAlign}>
                <Radio value={'left'}>居左</Radio>
                <Radio value={'center'}>居中</Radio>
            </Radio.Group>
        </Col> */}
        <Col className='editor-content-item-label'
            span={24}>
            组件样式
        </Col>
        <Col
            span={24}>
            <Row gutter={[12, 12]}>
                <Col span={6}>左右内边距</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ paddingLeft: e })}
                        value={paddingLeft}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ paddingLeft: e })
                    }} value={paddingLeft}></InputNumber></Col>
            </Row>
        </Col>
        <Col
            span={24}>
            <Row gutter={[12, 12]}>
                <Col span={6}>上下内边距</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ paddingTop: e })}
                        value={paddingTop}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ paddingTop: e })
                    }} value={paddingTop}></InputNumber></Col>
            </Row>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            外边距：
            <Radio.Group onChange={(e) => {
                handleUpdate({
                    top: 12,
                    bottom: 0,
                    marginType: e.target.value
                })
            }} value={marginType}>
                <Radio value={'detault'}>默认</Radio>
                <Radio value={'customize'}>自定义</Radio>
            </Radio.Group>
        </Col>
        {marginType === 'customize' && <Col
            span={24}>
            <Row gutter={[12, 12]}>
                <Col span={6}>上</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ top: e })}
                        value={top}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ top: e })
                    }} value={top}></InputNumber></Col>
            </Row>
            <Row gutter={[12, 12]}>
                <Col span={6}>下</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ bottom: e })}
                        value={bottom}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ bottom: e })
                    }} value={bottom}></InputNumber></Col>
            </Row>
        </Col>}
        <SelectModel onOk={(list) => {
            handleUpdate({
                list: list
            })
        }} visible={visible} onClose={() => { setVisible(false) }}></SelectModel>
        <EditLink handleCallback={(e) => {
            handleUpdate({
                linkType: 'customize',
                ...e
            })
        }} visible={editVisible} onClose={() => { setEditVisible(false) }}></EditLink>
    </Row>
}
export default FormComponents
